<template>
  <xh-pages>
  <view class="pages-container">
    <view class="wallet-container">
      <view class="money">￥{{ user.amount }}</view>
      <view class="action">
        <button class="apply" @tap="openWin({ url: '/pages/users/wallet/withdrawal' })">
          提现
        </button>
        <button class="apply" @tap="openWin({ url: '/pages/users/wallet/setting' })">
          设置
        </button>
      </view>
    </view>
    <view class="bill-container">
      <view class="bill-title">
        <view class="title">账单列表</view>
        <view class="more" @tap="openWin({ url: '/pages/users/wallet/bill' })">
          <text class="text">查看更多</text>
          <text class="icon pt-icon-youce"></text>
        </view>
      </view>
      <!-- 列表 -->
      <view class="list" v-if="datalist.length > 0">
        <view class="item" v-for="(item, index) in datalist" :key="index">
          <view class="label">
            <view class="icon pt-icon-weibiaoti-"></view>
            <view class="text">
              <view class="remarks">{{ item.remarks }}</view>
              <view class="time">{{ item.create_at }}</view>
            </view>
          </view>
          <view class="value" :class="{'dec':item.bill_type === '10','inc':item.bill_type === '20'}">
            {{ item.bill_type === "10" ? "-" : "" }}
            {{ item.bill_type === "20" ? "+" : "" }}
            {{ item.money }}
          </view>
        </view>
      </view>
      <view class="empty-container" v-else>
        <u-empty mode="list" textColor="#666" textSize="14" icon="/static/empty-new.png" />
      </view>
    </view>
  </view>
  </xh-pages>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { openWin } from "@/utils/helpers";
import { useUserStore } from "@/stores/user";
import type { billTypes } from "@/common/types/BillTypes";

const user = storeToRefs(useUserStore()).userInfo

const queryParams = ref<any>({
  page: 1,
  limit: 20,
});

const datalist = ref<billTypes[]>([]);
const getBillList = () => {
  uni.$u.http.get("UsersBill/index", { params: queryParams.value }).then((res: any) => {
    datalist.value = res.data.data;
  });
};
onShow(() => {
  uni.$emit('user::update');
  // 获取账单列表
  getBillList();
});
</script>

<style scoped lang="scss">
.pages-container {

  .wallet-container {
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 250rpx;
    padding: 0 40rpx;
    background: linear-gradient(to right, var(--theme-color),var(--theme-active-color));

    .money {
      font-size: 38rpx;
      color: #fff;
    }

    .action {
      display: flex;
      gap:15rpx;
      .apply {
        background: var(--theme-active-color);
        border:1px solid #fff;
        color: #fff;
        border-radius: 10rpx;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
      }
    }
  }

  .bill-container {
    background: #fff;
    margin-top: 30rpx;

    .bill-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #666;

      .title {
        font-weight: 700;
        color: #333;
        padding: 30rpx;
      }

      .more {
        font-size: 28rpx;
        display: flex;
        align-items: center;
        padding: 30rpx;
      }
    }

    .list {
      margin-bottom: 20rpx;

      .item {
        padding: 30rpx;
        border-top: 1px solid #e5e5e5;
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;

        .label {
          display: flex;
          align-items: center;

          .icon {
            font-size: 60rpx;
            padding-right: 20rpx;
          }

          .text {
            font-size: 28rpx;
            color: #666;

            .remarks {
              font-size: 28rpx;
              color: #333;
            }

            .time {
              font-size: 24rpx;
              color: #999;
            }
          }
        }

        .value {
          display: flex;
          align-items: center;
          font-size: 34rpx;
        }

        .inc {
          color: #17c178;
        }

        .dec {
          color: #ff0000;
        }
      }
    }
  }
}

.empty-container {
  padding: 100rpx 0;
  border-top: 1px solid #e5e5e5;
}
</style>
